<template>
  <div class="login-container">
    <div class="login-box">
      <div class="logo">
        <h1 class="l" style="">{{ isLoginMode ? '登录' : '注册' }}</h1>
      </div>

      <form class="login-form">
        <div class="form-group" v-if="isLoginMode">
          <label for="username">{{ isLoginMode ? '用户名' : '邮箱' }}</label>
          <div class="input-wrapper">
                        <span class="input-icon">
                            <svg v-if="isLoginMode" class="icon" aria-hidden="true" style="color: #fff;">
                                <use xlink:href="#icon-yonghuming"></use>
                            </svg>
                            <svg v-else t="1751979846324" class="icon" viewBox="0 0 1227 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="4148" width="200" height="200">
                                <path
                                    d="M1010.30418406 992H206.06243094A172.40203688 172.40203688 0 0 1 33.88620781 819.7839275V206.24839531c-7.1729025-42.62563687 6.77440781-83.68386094 36.70135032-107.50055343a100.95195938 100.95195938 0 0 1 52.09652437-20.93424844 23.24551687 23.24551687 0 0 1 20.48262094 8.32853625l410.58224531 498.19791937 0.23909625 0.27894563c0.86340469 0.98295375 8.06287312 8.82001312 16.08589781 8.89971281h0.11954813c7.49169844 0 15.2623425-7.13305312 20.456055-13.123755q0.43834406-0.50475938 0.88997156-0.96967031l339.90259031-349.34691188a23.24950219 23.24950219 0 1 1 33.32742938 32.42417531L625.278725 611.3845475c-21.25304437 24.22847062-42.50608781 28.93070625-56.53309781 28.59862688-29.22293531-0.70400719-48.05844562-22.58135906-51.02058844-26.22094313L116.10892156 126.44321469a50.94088969 50.94088969 0 0 0-16.59065719 8.66061562c-16.97586937 13.52224969-24.48085031 38.38831125-19.57936687 64.86163313a23.24551687 23.24551687 0 0 1 0.38521125 4.23732562v615.58113844a125.85787031 125.85787031 0 0 0 125.72503875 125.72503875h804.22847062a125.85787031 125.85787031 0 0 0 125.72503875-125.72503875V204.2160725A125.85787031 125.85787031 0 0 0 1010.27761813 78.49103375H520.83329656a23.24551687 23.24551687 0 0 1 0-46.49103375h489.45760406a172.40203688 172.40203688 0 0 1 172.21607344 172.2160725v615.567855A172.40203688 172.40203688 0 0 1 1010.30418406 992z"
                                    p-id="4149" fill="#ffffff"></path>
                            </svg>
                        </span>
            <input type="text" id="username" v-model="formData.userName"
                   :placeholder="isLoginMode ? '请输入用户名' : '请输入邮箱'" @focus="handleFocus('username')"
                   @blur="handleBlur('username')">
          </div>
          <div v-if="errors.userName" class="error-message">{{ errors.userName }}</div>
        </div>
        <div class="form-group" v-if="!isLoginMode">
          <label for="username">邮箱</label>
          <div class="input-wrapper">
              <span class="input-icon">
                  <svg t="1751979846324" class="icon" viewBox="0 0 1227 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="4148" width="200" height="200">
                      <path
                          d="M1010.30418406 992H206.06243094A172.40203688 172.40203688 0 0 1 33.88620781 819.7839275V206.24839531c-7.1729025-42.62563687 6.77440781-83.68386094 36.70135032-107.50055343a100.95195938 100.95195938 0 0 1 52.09652437-20.93424844 23.24551687 23.24551687 0 0 1 20.48262094 8.32853625l410.58224531 498.19791937 0.23909625 0.27894563c0.86340469 0.98295375 8.06287312 8.82001312 16.08589781 8.89971281h0.11954813c7.49169844 0 15.2623425-7.13305312 20.456055-13.123755q0.43834406-0.50475938 0.88997156-0.96967031l339.90259031-349.34691188a23.24950219 23.24950219 0 1 1 33.32742938 32.42417531L625.278725 611.3845475c-21.25304437 24.22847062-42.50608781 28.93070625-56.53309781 28.59862688-29.22293531-0.70400719-48.05844562-22.58135906-51.02058844-26.22094313L116.10892156 126.44321469a50.94088969 50.94088969 0 0 0-16.59065719 8.66061562c-16.97586937 13.52224969-24.48085031 38.38831125-19.57936687 64.86163313a23.24551687 23.24551687 0 0 1 0.38521125 4.23732562v615.58113844a125.85787031 125.85787031 0 0 0 125.72503875 125.72503875h804.22847062a125.85787031 125.85787031 0 0 0 125.72503875-125.72503875V204.2160725A125.85787031 125.85787031 0 0 0 1010.27761813 78.49103375H520.83329656a23.24551687 23.24551687 0 0 1 0-46.49103375h489.45760406a172.40203688 172.40203688 0 0 1 172.21607344 172.2160725v615.567855A172.40203688 172.40203688 0 0 1 1010.30418406 992z"
                          p-id="4149" fill="#ffffff"></path>
                  </svg>
              </span>
            <input type="text" id="email" v-model="formData.email"
                   placeholder="请输入邮箱" @focus="handleFocus('email')"
                   @blur="handleBlur('email')">
          </div>
          <div v-if="errors.email" class="error-message">{{ errors.email }}</div>
        </div>

        <div class="form-group" v-if="!isLoginMode">
          <label for="username">用户名</label>
          <div class="input-wrapper">
                <span class="input-icon">
                    <svg class="icon" aria-hidden="true" style="color: #fff;">
                        <use xlink:href="#icon-yonghuming"></use>
                    </svg>
                </span>
            <input type="text" id="username" v-model="formData.userName"
                   placeholder="请输入用户名" @focus="handleFocus('username')"
                   @blur="handleBlur('username')">
          </div>
          <div v-if="errors.userName" class="error-message">{{ errors.userName }}</div>
        </div>
        <div class="form-group" v-if="!isLoginMode">
          <label for="username">昵称</label>
          <div class="input-wrapper">
            <span class="input-icon">
              <svg t="1754224578136" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="15379" width="200" height="200"><path
                  d="M517.779868 90.55127c103.194732 0 187.484478 84.169332 187.484478 187.364064S621.697084 465.399812 517.779868 465.399812c-103.194732 0-187.364064-84.169332-187.364064-187.484478 0-103.194732 84.169332-187.364064 187.364064-187.364064m0-74.89746c-144.978363 0-262.381938 117.403575-262.381938 262.381938S372.801505 540.417686 517.779868 540.417686s262.381938-117.403575 262.381938-262.381938C780.28222 132.936971 662.878645 15.65381 517.779868 15.65381z m0 0"
                  fill="#ffffff" p-id="15380"></path><path
                  d="M76.583255 992.69238c-20.229539 0-36.244591-16.617121-36.244591-37.44873 0-266.716839 221.802446-483.582314 494.660395-483.582314 109.335842 0 213.253057 34.438382 299.830668 98.980244 16.617121 12.28222 19.627469 35.642521 7.947319 52.259643-11.680151 16.617121-34.438382 20.229539-51.055503 7.947319-74.415804-55.269991-162.799624-84.771402-256.842898-84.771402-232.278457 0-421.569144 183.751646-421.569144 408.684854-0.481656 21.313264-16.376294 37.930386-36.726246 37.930386z m879.984948-194.227658H672.632173c-20.229539 0-36.84666-16.617121-36.84666-36.84666v-1.204139c0-20.229539 16.617121-36.84666 36.84666-36.846661h283.93603c20.229539 0 36.84666 16.617121 36.846661 36.846661v1.204139a36.84666 36.84666 0 0 1-36.846661 36.84666z m0 194.227658H672.632173c-20.229539 0-36.84666-16.617121-36.84666-36.84666v-1.20414c0-20.229539 16.617121-36.84666 36.84666-36.84666h283.93603c20.229539 0 36.84666 16.617121 36.846661 36.84666v1.20414c0 20.229539-16.496707 36.84666-36.846661 36.84666z m0 0"
                  fill="#ffffff" p-id="15381"></path></svg>
            </span>
            <input type="text" id="username" v-model="formData.nickName"
                   placeholder="请输入昵称" @focus="handleFocus('nickName')"
                   @blur="handleBlur('nickName')">
          </div>
          <div v-if="errors.nickName" class="error-message">{{ errors.nickName }}</div>
        </div>
        <div class="form-group">
          <label for="password">{{ isLoginMode ? '密码' : '设置密码' }}</label>
          <div class="input-wrapper">
                        <span class="input-icon">
                            <svg t="1751979598015" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="2637" width="200" height="200" fill="#ffffff">
                                <path
                                    d="M888.7 402.3h-61.9v-89.7C826.8 128.4 659.9 0 510.1 0 356.3 0 197.2 116.7 197.2 312.1v90.2h-61.9C60.7 402.3 0 461.5 0 534.3V892c0 72.8 60.7 132 135.3 132h753.4c74.6 0 135.3-59.2 135.3-132V534.3c0-72.8-60.7-132-135.3-132z m-647-90.2c0-167.5 136.5-267.5 268.4-267.5 128.8 0 272.2 110.1 272.2 268v89.7H241.7v-90.2zM979.5 892c0 48.2-40.7 87.5-90.8 87.5H135.3c-50 0-90.8-39.2-90.8-87.5V534.3c0-48.2 40.7-87.5 90.8-87.5h753.4c50 0 90.8 39.2 90.8 87.5V892z"
                                    fill="#fff" p-id="2638"></path>
                                <path
                                    d="M512 579.6c-12.3 0-22.3 10-22.3 22.3v222.6c0 12.3 10 22.3 22.3 22.3s22.3-10 22.3-22.3V601.8c0-12.3-10-22.2-22.3-22.2z"
                                    fill="#fff" p-id="2639"></path>
                            </svg>
                        </span>
            <input type="password" id="password" v-model="formData.password"
                   :placeholder="isLoginMode ? '请输入密码' : '请设置密码'" @focus="handleFocus('password')"
                   @blur="handleBlur('password')">
          </div>
          <div v-if="errors.password" class="error-message">{{ errors.password }}</div>
        </div>

        <div class="form-group" v-if="!isLoginMode">
          <label for="confirmPassword">确认密码</label>
          <div class="input-wrapper">
                        <span class="input-icon">
                            <svg t="1751980190451" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="6591" width="200" height="200">
                                <path
                                    d="M745.472 1011.712c-11.702272-3.309568-23.474176-6.381568-35.094528-9.957376-103.038976-31.694848-171.814912-139.264-156.368896-244.420608 16.60928-113.045504 110.1824-195.837952 221.663232-196.120576 110.657536-0.282624 200.638464 72.564736 223.789056 181.055488 0.835584 3.907584 2.68288 7.59808 4.059136 11.390976v65.536c-1.523712 5.152768-3.21536 10.256384-4.542464 15.454208-20.959232 82.108416-70.660096 138.174464-150.990848 166.27712-12.099584 4.231168-24.641536 7.217152-36.974592 10.780672L745.472 1011.712z m33.73056-49.127424c95.92832-0.651264 175.833088-81.440768 175.190016-177.115136-0.647168-95.903744-81.46944-175.84128-177.119232-175.190016-95.86688 0.65536-175.849472 81.522688-175.18592 177.123328 0.667648 95.956992 81.42848 175.833088 177.115136 175.181824z"
                                    p-id="6592" fill="#ffffff"></path>
                                <path
                                    d="M829.054976 340.037632c20.099072 0 40.706048-1.708032 60.776448 0.815104 8.364032 1.052672 15.941632 10.73152 23.097344 17.334272 1.732608 1.59744 0.417792 6.5536 0.417792 9.961472 0.008192 65.941504 0.008192 131.883008 0.008192 200.044544-15.331328-6.868992-28.880896-11.595776-40.804352-18.952192-4.632576-2.854912-7.798784-11.620352-7.8848-17.739776-0.638976-46.374912-0.352256-92.762112-0.352256-140.791808H83.37408v514.56h21.479424c137.85088 0 275.705856 0.397312 413.548544-0.442368 19.771392-0.118784 33.738752 3.145728 41.111552 23.236608 3.13344 8.536064 9.658368 15.826944 16.273408 26.247168h-20.721664c-163.10272 0-326.20544 0.008192-489.304064-0.008192-29.274112-0.004096-32.927744-3.657728-32.93184-32.923648-0.016384-182.890496-0.016384-365.785088 0-548.675584 0-29.028352 3.710976-32.632832 33.189888-32.677888 16.986112-0.024576 33.97632-0.004096 50.716672-0.004096 33.77152-204.701696 210.067456-323.301376 371.5072-315.908096 144.65024 6.623232 306.880512 116.65408 340.811776 315.92448z m-51.961856-0.823296c-18.907136-150.208512-164.737024-272.134144-315.056128-265.261056-145.53088 6.656-286.94528 134.766592-291.946496 265.261056H777.09312z"
                                    p-id="6593" fill="#ffffff"></path>
                                <path
                                    d="M402.173952 604.971008c3.231744-32.329728 22.761472-58.281984 52.342784-66.53952 28.069888-7.835648 58.585088 4.325376 74.309632 29.609984 16.05632 25.82528 13.529088 59.55584-9.027584 80.478208-11.362304 10.543104-14.811136 21.159936-14.094336 35.51232 0.749568 14.934016 0.745472 30.02368-0.462848 44.916736-1.708032 21.05344-15.241216 33.30048-34.267136 32.800768-18.88256-0.499712-31.563776-13.869056-32.452608-34.65216-0.376832-8.839168-0.106496-17.711104-0.094208-26.566656 0.032768-21.311488 2.940928-42.061824-18.7392-58.232832-9.719808-7.245824-11.907072-24.571904-17.514496-37.326848zM749.600768 810.426368c27.570176-25.919488 53.837824-50.54464 80.003072-75.264 4.947968-4.681728 9.396224-9.883648 14.290944-14.618624 15.282176-14.790656 32.608256-16.162816 44.957696-3.70688 11.845632 11.952128 11.280384 28.688384-2.605056 43.511808-18.16576 19.398656-36.970496 38.199296-55.554048 57.212928-18.57536 19.013632-36.913152 38.27712-55.914496 56.856576-15.007744 14.671872-30.568448 14.995456-44.814336 0.397312-22.360064-22.921216-44.163072-46.411776-65.57696-70.230016-12.668928-14.09024-12.263424-30.404608-0.49152-41.967616 12.648448-12.423168 28.71296-11.689984 43.102208 2.8672 15.187968 15.368192 29.75744 31.346688 42.602496 44.941312z"
                                    p-id="6594" fill="#ffffff"></path>
                            </svg>
                        </span>
            <input type="password" id="confirmPassword" v-model="formData.confirmPassword"
                   placeholder="请再次输入密码" @focus="handleFocus('confirmPassword')"
                   @blur="handleBlur('confirmPassword')">
          </div>
          <div v-if="errors.confirmPassword" class="error-message">{{ errors.confirmPassword }}</div>
        </div>

        <div class="remember-me" v-if="isLoginMode">
          <input type="checkbox" id="remember" v-model="formData.remember">
          <label for="remember">记住我</label>
        </div>

        <button type="button" class="login-button" :class="{ 'loading': loading }"
                @click="isLoginMode ? handleLogin() : handleRegister()">
          {{ isLoginMode ? '登录' : '注册' }}
        </button>
      </form>
      <div class="mode-toggle">
        <p>
          {{ isLoginMode ? '还没有账号？' : '已有账号？' }}
          <a href="#" @click.prevent="toggleMode">{{ isLoginMode ? '立即注册' : '返回登录' }}</a>
        </p>
      </div>
    </div>

    <!--  注册弹框  -->
    <a-modal v-model:open="open" title="邮箱验证" @ok="confirmRegister">
      <template #footer>
        <a-button key="back" @click="open = false">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading1" @click="confirmRegister">确定</a-button>
      </template>
      <span style="font-size: 10px;">已将验证码发送至 {{ formData.email }}</span>
      <a-input style="margin-top: 5px;" placeholder="请输入验证码" v-model:value="formData.code"></a-input>
      <div v-if="errors.code" class="error-message">{{ errors.code }}</div>
    </a-modal>

    <!-- 背景装饰 -->
    <div class="decor-circle circle-1"></div>
    <div class="decor-circle circle-2"></div>
    <div class="decor-pattern"></div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import {finishRegister, login, sendEmailRegisterCode} from '@/api/user';
import {useUserStore} from '@/stores/user';
import {useRouter} from 'vue-router';
import {message} from 'ant-design-vue';

const router = useRouter();
const open = ref(false);
// 表单数据
const formData = reactive({
  userName: '',
  nickName: '',
  email: '',
  password: '',
  confirmPassword: '',
  code: '',
  remember: false
})
// 错误信息
const errors = reactive({
  userName: '',
  nickName: '',
  email: '',
  code: '',
  password: '',
  confirmPassword: '',
})
// 状态
const loading = ref(false)
const loading1 = ref(false);
const isLoginMode = ref(true)
const userStore = useUserStore();
// 表单验证
const validateForm = () => {
  let isValid = true

  Object.keys(errors).forEach(key => {
    errors[key] = ''
  })

  if (isLoginMode.value) {
    if (!formData.userName.trim()) {
      errors.userName = '用户名不能为空'
      isValid = false
    }
    if (!formData.password) {
      errors.password = '密码不能为空'
      isValid = false
    } else if (formData.password.length < 6) {
      errors.password = '密码长度不能少于6位'
      isValid = false
    }
  } else {
    if (!formData.email.trim()) {
      errors.email = '邮箱不能为空'
      isValid = false
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      errors.email = '请输入有效的邮箱地址'
      isValid = false
    }
    if (!formData.userName.trim()) {
      errors.userName = '用户名不能为空'
      isValid = false
    }
    if (!formData.nickName.trim()) {
      errors.nickName = '昵称不能为空'
      isValid = false
    }
    if (!formData.password) {
      errors.password = '密码不能为空'
      isValid = false
    } else if (formData.password.length < 6) {
      errors.password = '密码长度不能少于6位'
      isValid = false
    }
    if (formData.password !== formData.confirmPassword) {
      errors.confirmPassword = '两次输入的密码不一致'
      isValid = false
    }
  }
  return isValid
}
// 处理注册
const handleRegister = () => {
  loading.value = true;
  if (validateForm()) {
    sendEmailRegisterCode(formData).then(res => {
      if ((res.code === 200 || res.code === 501)) {
        message.success('已发送注册验证码至您的邮箱');
        open.value = true
      } else {
        message.error(res.message);
      }
      loading.value = false;
    }).catch(err => {
      console.log(err)
      loading.value = false;
    })
  }
}
// 确认注册
const confirmRegister = () => {
  if (!formData.code.trim()) {
    errors.code = '验证码不能为空'
    return;
  }
  loading1.value = true;
  finishRegister(formData).then(res => {
    if (res.code === 200 && res.data) {
      message.success('注册成功');
      open.value = false;
      handleLogin();
    } else {
      message.error(res.message);
    }
    loading1.value = false;
  }).catch(err => {
    console.log(err)
    loading1.value = false;
  })
}
// 切换登录/注册模式
const toggleMode = () => {
  formData.email = ''
  formData.userName = ''
  formData.nickName = ''
  formData.password = ''
  formData.confirmPassword = ''
  formData.remember = false
  Object.keys(errors).forEach(key => {
    errors[key] = ''
  })

  isLoginMode.value = !isLoginMode.value

  const loginBox = document.querySelector('.login-box')
  loginBox.classList.add('mode-transition')
  setTimeout(() => {
    loginBox.classList.remove('mode-transition')
  }, 300)
}

// 在组件挂载时检查本地存储
onMounted(() => {
  // 页面加载动画
  const loginBox = document.querySelector('.login-box')
  loginBox.classList.add('animate-in')
  // 创建动态背景效果
  createDynamicBackground()

  const storedUsername = localStorage.getItem('userName');
  const storedPassword = localStorage.getItem('password');
  const storedRemember = localStorage.getItem('remember') === 'true';
  if (storedRemember && storedUsername && storedPassword) {
    formData.userName = storedUsername;
    formData.password = storedPassword;
    formData.remember = true;
  }
});

const handleLogin = async () => {
  loading.value = true;
  login(formData).then(res => {
    if (res.code === 200) {
      message.success('登录成功!');
      let data = res.data;
      userStore.login(data.userInfo.id, formData.userName, data.token)
      localStorage.setItem('token', data.token);
      localStorage.setItem('userId', data.userInfo.id);
      localStorage.setItem('nickName', data.userInfo.nickName);
      localStorage.setItem('avatar', data.userInfo.avatar);
      if (formData.remember) {
        localStorage.setItem('userName', formData.userName);
        localStorage.setItem('password', formData.password);
        localStorage.setItem('remember', 'true');
      } else {
        localStorage.removeItem('userName');
        localStorage.removeItem('password');
        localStorage.removeItem('remember');
      }
      router.push('/home')
      loading.value = false;
    }
  }).finally(() => {
    loading.value = false;
  })
};

// 创建动态背景效果
const createDynamicBackground = () => {
  const pattern = document.querySelector('.decor-pattern')

  // 创建SVG图案
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  svg.setAttribute('width', '100%')
  svg.setAttribute('height', '100%')
  svg.setAttribute('viewBox', '0 0 100 100')
  svg.setAttribute('preserveAspectRatio', 'none')

  // 创建图案定义
  const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')

  // 创建图案
  const patternElement = document.createElementNS('http://www.w3.org/2000/svg', 'pattern')
  patternElement.setAttribute('id', 'pattern')
  patternElement.setAttribute('width', '20')
  patternElement.setAttribute('height', '20')
  patternElement.setAttribute('patternUnits', 'userSpaceOnUse')

  // 创建图案中的小形状
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
  path.setAttribute('d', 'M10,0 L20,10 L10,20 L0,10 Z')
  path.setAttribute('fill', 'none')
  path.setAttribute('stroke', 'rgba(255,255,255,0.05)')
  path.setAttribute('stroke-width', '0.5')

  patternElement.appendChild(path)
  defs.appendChild(patternElement)

  // 创建使用图案的矩形
  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
  rect.setAttribute('width', '100%')
  rect.setAttribute('height', '100%')
  rect.setAttribute('fill', 'url(#pattern)')

  svg.appendChild(defs)
  svg.appendChild(rect)
  pattern.appendChild(svg)
}

// 处理输入框聚焦
const handleFocus = (field) => {
  const input = document.getElementById(field)
  input.parentElement.classList.add('focused')
}

// 处理输入框失焦
const handleBlur = (field) => {
  const input = document.getElementById(field)
  input.parentElement.classList.remove('focused')
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* 装饰元素 */
.decor-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.7;
}

.circle-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(106, 17, 203, 0.8) 0%, rgba(106, 17, 203, 0) 70%);
  top: -200px;
  right: -150px;
}

.circle-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(37, 117, 252, 0.8) 0%, rgba(37, 117, 252, 0) 70%);
  bottom: -150px;
  left: -100px;
}

.decor-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
}

/* 登录框 */
.login-box {
  background: rgba(158, 83, 224, 0.3);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 40px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  transform: translateY(20px);
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards 0.2s;
  position: relative;
  z-index: 10;
  transition: all 0.3s;
  max-height: 95vh;
  overflow-y: auto;
}

/* 优化滚动条样式（可选，提升美观度） */
.login-box::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}

.login-box::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2); /* 滚动条颜色 */
  border-radius: 3px;
}

@keyframes fadeInUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.login-box.mode-transition {
  transform: scale(0.98);
  opacity: 0.8;
}

.logo {
  text-align: center;
  margin-bottom: 30px;

  h1 {
    color: var(--text-color4);
    font-weight: bold;
    letter-spacing: 1px;
  }

  .icon {
    display: inline-block;
    font-size: 40px;
    margin-bottom: 10px;
    animation: pulse 2s infinite;
  }
}


@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

/* 表单样式 */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-group {
  position: relative;
}

.form-group label {
  display: block;
  color: var(--text-color4);
  margin-bottom: 8px;
  font-size: 14px;
  transition: all 0.3s;
}

.input-wrapper {
  position: relative;
  transition: all 0.3s;

  input {
    width: 100%;
    padding: 15px 45px;
    background: rgba(176, 163, 235, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: black;
    font-size: 16px;
    outline: none;
    transition: all 0.3s;

    &:focus {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.4);
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    }
  }
}

.input-wrapper:focus-within {
  transform: translateY(-2px);
}

.input-wrapper .input-icon {
  position: absolute;
  left: 15px;
  top: 52%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  transition: all 0.3s;
}

.input-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.input-wrapper:focus-within .input-icon {
  color: black;
}

.error-message {
  color: #ff7675;
  font-size: 12px;
  margin-top: 5px;
  animation: shake 0.3s;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-color4);
  font-size: 14px;

  label {
    cursor: pointer;
  }
}

.remember-me input {
  appearance: none;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.remember-me input:checked {
  background: var(--text-color4);
}

.remember-me input:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
}

.login-button {
  padding: 15px;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(37, 117, 252, 0.3);
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 117, 252, 0.4);
}

.login-button:active {
  transform: translateY(0);
}

.login-button.loading {
  cursor: not-allowed;
  opacity: 0.8;
}

.login-button.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 社交登录 */
.social-login {
  margin-top: 25px;
  text-align: center;
}

.social-login p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-bottom: 15px;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s;
}

.social-icon:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* 模式切换 */
.mode-toggle {
  margin-top: 25px;
  text-align: center;
  color: #000;
}

.mode-toggle p {
  color: var(--text-color4);
  font-size: 14px;
}

.mode-toggle a {
  color: var(--text-color4);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.3s;
  font-weight: 500;

  &:hover {
    border-bottom-color: var(--text-color4);
  }
}
</style>